<template>
	<view class="pop_bg">
		<view class="pop">
			<image src="@/static/order/warn.png" class="icon"></image>
			<view>
				<text>将扣除订单费用的</text>
				<text class="text">{{ cper * 100 }}%</text>
				<block v-if="status >= 3 && way_pay > 0">
					<text>, 并扣除路费</text>
					<text class="text">{{ vk.pubfn.priceFilter(way_pay) }}</text>
					<text class="ut">元</text>
				</block>
			</view>
			<view>是否确认申请退款？</view>
			<view class="total">
				<text>共需扣除金额：</text>
				<text class="text">{{ vk.pubfn.priceFilter(total) }}</text>
				<text class="ut">元</text>
			</view>
			<view class="btns">
				<view class="btn white" @tap="hide">取消</view>
				<view class="btn" @tap="send">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			oid: "",
			cper: 0,
			way_pay: 0,
			status: 0,
			total: 0
		}
	},
	methods: {
		init(info) {
			this.oid = info._id
			this.cper = info.cper
			this.way_pay = info.way_pay
			this.status = info.status
			this.total = Math.round(info.cper * info.need_pay)
			if (info.status >= 3 && info.way_pay > 0) {
				this.total += info.way_pay
			}
		},
		hide() {
			this.$emit("hide")
		},
		send() {
			this.$emit("send", this.oid)
		}
	}
}
</script>

<style lang="scss" scoped>
.pop_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

.pop {
	position: absolute;
	top: 50%;
	left: 40rpx;
	right: 40rpx;
	transform: translateY(-50%);
	border-radius: 20rpx;
	background-color: #fff;
	padding: 100rpx 18rpx 36rpx;
	text-align: center;
	font-weight: bold;
	line-height: 46rpx;
	.icon {
		width: 266rpx;
		height: 266rpx;
		position: absolute;
		left: 50%;
		top: -130rpx;
		transform: translateX(-50%);
	}
	.text {
		color: #fe0000;
	}
	.ut {
		font-size: 12rpx;
		color: #fe0000;
	}
	.total {
		padding: 32rpx 0;
	}
	.btns {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.btn {
		flex: 1;
		height: 70rpx;
		background-color: #71bf52;
		border-radius: 45rpx;
		line-height: 70rpx;
		text-align: center;
		color: #fff;
		margin: 0 10rpx;
		font-weight: normal;
		border: 1rpx solid #71bf52;
	}
	.white {
		color: #71bf52;
		background-color: #fff;
	}
}
</style>
